<template>
  <div>
    <div class="vux-demo">
      <img class="logo" src="../assets/vux_logo.png">
      <h1> </h1>
    </div>
    <group title="cell demo">
      <cell title="VUX" value="cool" is-link></cell>
    </group>
    <group>
    <x-input label title="title" placeholder='请输入标题' novalidate  icon-type='error' is-type="email" v-model="inputVal">
      <svg slot="right" class="icon" aria-hidden="true">
        <use xlink:href="#icon-all"></use>
      </svg>
    </x-input>
    <x-textarea class="tx" :max="20" ></x-textarea>
  </group>
  <div class="table">
    <div class="table-left">
        <x-table :cell-bordered="false">
        <thead>
          <tr>
            <th>Product</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Apple</td>
          </tr>
          <tr>
            <td>Banana</td>
          </tr>
        </tbody>
      </x-table>
    </div>
    <div class="table-right">
        <x-table :cell-bordered="false">
            <thead>
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>Price</th>
                <th>Price</th>
                <th>Price</th>
                <th>Price</th>
                <th>Price</th>
                <th>Price</th>
                <th>Price</th>
                <th>Price</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Apple</td>
                <td>$1.25</td>
                <td>$1.25</td>
                <td>$1.25</td>
                <td>$1.25</td>
                <td>$1.25</td>
                <td>$1.25</td>
                <td>$1.25</td>
                <td>$1.25</td>
                <td>$1.25</td>
            </tr>
            <tr>
                <td>Banana</td>
                <td>$1.20</td>
                <td>$1.20</td>
                <td>$1.20</td>
                <td>$1.20</td>
                <td>$1.20</td>
                <td>$1.20</td>
                <td>$1.20</td>
                <td>$1.20</td>
                <td>$1.20</td>
            </tr>
            </tbody>
      </x-table>
    </div>
</div>
  </div>
</template>

<script>
import { XInput,Group, Cell,XTextarea,XTable } from 'vux';
import '../assets/iconfont/iconfont.js'
export default {
  components: {
    Group,
    Cell,
    XInput,
    XTextarea,
    XTable,
  },
  data () {
    return {
      msg: 'Hello World!',
      inputVal:'',
      vShow:false
    }
  },
  mounted(){
    document.querySelector('.tx textarea').setAttribute("disabled","disabled");
  }
}
</script>

<style lang='scss'>
.vux-demo {
  text-align: center;
}
.logo {
  width: 100px;
  height: 100px
}
.weui-cell__hd{
  label{
  color: blue;
  padding-left: 20px;
  }
}
.icon{
  position: absolute;
  left: 12px;
  top: 16px;
  color: blue;

}
.table{
  display: flex;
  &-left{
      th,td{
        padding: 0 10px;
      }
    
  }
  &-right{
    overflow-x: scroll;
    th,td{
      padding: 0 10px;
      
    }
  }
}
::-webkit-scrollbar{display:none; width:0; height: 0;}
</style>
